<template>
	<view class="container">
		<view class="left" @click="handleToindex()">
			<uni-icons type="home" size="20" :color="status.isActive == '首页' ? '#f27b24' : ''"></uni-icons>
			<span :class="[status.isActive == '首页' ? data.ActiveClass : '']">首页</span>
		</view>
		<span class="line"></span>
		<view class="right" @click="handleTopersonal()">
			<uni-icons type="person" size="20" :color="status.isActive == '个人' ? '#f27b24' : ''"></uni-icons>
			<span :class="[status.isActive == '个人' ? data.ActiveClass : '']">我的</span>
		</view>
	</view>
</template>

<script setup>
name: 'tabbar'
import { reactive } from 'vue'
import { useStatusStore } from '../stores/TabbarStatus.js'
const status = useStatusStore()
let data = reactive({
	name: 'components',
	ActiveClass: 'orange'
})
const handleToindex = () => {
	status.changeStatusOnindex()
	uni.redirectTo({
		url: '/pages/index/index'
	})
}
const handleTopersonal = () => {
	status.changeStatusOnpersonal()
	uni.redirectTo({
		url: '/pages/personal/personal'
	})
}
</script>

<style lang="less" scoped>
.container {
	background-color: #ffffff;
	width: 200px;
	height: 60px;
	border: 1px solid #f0f0f0;
	border-radius: 25px;
	position: fixed;
	left: 50%;
	bottom: 100rpx;
	transform: translate(-50%);
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 10rpx;
	font-size: 30rpx;
	.left {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.orange {
			color: #f27b24;
		}
	}
	.right {
		width: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		.orange {
			color: #f27b24;
		}
	}
	.line {
		height: 70rpx;
		border-right: 1px solid #f0f0f0;
	}
}
</style>
